<template>
  <div class="head-container">
    <el-select v-model="query.customerName" placeholder="请选择客户" class="filter-item" clearable @change="handleSelect($event)">
      <el-option v-for="(item,index) in customerItem" :key="item.id + index" :label="item.customerName" :value="item" />
    </el-select>
    <el-select v-model="query.supplier" placeholder="请选择供应商" class="filter-item input_text" clearable @change="handleSelectSupplier">
      <el-option v-for="item in supplierOptions" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>
    <!--
    <el-input v-model="query.orderCode" clearable placeholder="工单编号" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
    -->
    <AreaSelect ref="areaSelect" class="filter-item" :default-props="query" clearable @change="handleSelectArea" />
    <el-input v-model="query.taskAddr" clearable placeholder="详细地址" style="width: 200px;" class="filter-item" @keyup.native="toQuery" />
    <el-select v-model="query.status" style="width: 200px;" clearable class="filter-item" placeholder="工单状态">
      <el-option
        v-for="(item, index) in statusList"
        :key="item.label + index"
        :label="item.label"
        :value="item.value"
        clearable
        @change="toQuery"
      />
    </el-select>
    <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
    <el-button class="filter-item" size="mini" type="success" icon="el-icon-plus" @click="batchDispatch">批量派单</el-button>
    <el-button class="filter-item" size="mini" type="success" icon="el-icon-plus" @click="batchEvaluate">批量评价</el-button>
  </div>
</template>

<script>
import { getDictDetails } from '@/api/dictDetail'
import AreaSelect from '@/components/AreaSelect'
import { queryidandname } from '@/api/tServiceproviderInfo'
import request from '@/utils/request'

export default {
  components: {
    AreaSelect
  },
  props: {
    query: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      statusList: [],
      sourceList: [
        { label: '故障单', value: '1' },
        { label: '任务单', value: '2' },
        { label: '巡检单', value: '3' }
      ],
      customerItem: [],
      supplierOptions: []
    }
  },
  created() {
    this.getOrderStates()
    this.tcustmerInfoAll()
    this.tsupplierInfoAll()
  },
  methods: {
    toQuery() {
      this.$parent.page = 0
      this.$parent.init()
    },
    batchDispatch() {
      this.$parent.batchDispatch()
    },
    batchEvaluate() {
      this.$parent.batchEvaluate()
    },
    getOrderStates() {
      getDictDetails('order_status').then(res => {
        this.statusList = res.content
      })
    },
    handleSelectArea(countryItem, provinceItem, cityItem, areaItem) {
      console.log(countryItem, '...............')
      this.query.country = countryItem.name
      this.query.province = provinceItem.name
      this.query.city = cityItem.name
      this.query.county = areaItem.name
    },
    handleSelect(item) {
      this.query.customerId = item.id
      this.query.customerName = item.customerName
    },
    handleSelectSupplier(item) {
      this.query.supplier = item
    },
    tcustmerInfoAll() {
      request({
        url: 'api/tCustomerInfoAll',
        method: 'get'
      }).then(res => {
        this.customerItem = res
      })
    },
    tsupplierInfoAll() {
      queryidandname({}).then(res => {
        this.supplierOptions = res.map(item => ({
          id: item.id,
          name: item.seproName
        }))
      })
    }
  }
}
</script>
